<template>
	<up-navbar bgColor="transparent">
		<template #left>
			<view class="u-flex u-flex-items-center">
				<view class="f-s-16 u-m-r-12 u-main-color f-w-b">慈溪市</view>
				<!-- <up-icon name="arrow-down"></up-icon> -->
				<!-- <image src="@/static/tq.png" mode="widthFix" class="u-m-l-28" style="width: 40rpx;height: auto;">
					</image> -->
				<!-- <weather-icon :weather="pageData.weather.info"></weather-icon> -->
				<!-- <view class="u-m-l-12 f-s-12 " v-if="pageData.weather.temperature">{{ pageData.weather.temperature }}℃
				</view> -->
			</view>
		</template>
	</up-navbar>

	<view class="home-top" :style="{
		padding: `${bottom + 24}px 32rpx 28rpx`
	}">
		<view class="u-flex u-flex-items-center">
			<view class="f-s-24 f-w-b" v-if="Object.keys(userInfo).length > 0">您好，{{ userInfo.nickName }}</view>
			<view class="f-s-24 f-w-b" v-else @click="login">您好，<text class="main-color">请登录</text></view>
		</view>
		<view class="f-s-14 u-content-color u-m-t-16">欢迎使用环创警企通</view>

		<view class="entp-box u-flex u-flex-between u-flex-items-center">
			<view class="u-flex u-flex-items-center">
				<image src="@/static/entp-qrcode.png" style="width: 88rpx;height: auto;" mode="widthFix"></image>
				<view class="f-s-14 f-w-b u-m-l-10">企业二维码</view>
			</view>
			<view>
				<up-button text="查看" shape="circle" size="small" iconColor="#fff" color="#1677FF" :customStyle="{
					width: '140rpx',
					height: '56rpx'
				}" @click="entQrCode"></up-button>
			</view>
		</view>
		<view class="home-area">
			<block v-if="pageData.appList.length > 0">
				<up-grid :border="false" :col="4">
					<up-grid-item v-for="app in pageData.appList" :key="app.id" @click="toPage(app)">
						<image :src="app.logo" style="width: 120rpx;height: 120rpx;"></image>
						<view class="f-s-12 u-content-color u-m-b-40">{{app.name}}</view>
					</up-grid-item>
				</up-grid>
			</block>
			<view v-else class="u-p-b-40">
				<up-empty :marginTop="16" mode="data" text="暂无应用" :width="80" :height="80"
					icon="https://imgs.ddeke.com/2024/08/01/C5UsP1Ggo6.png">
				</up-empty>
			</view>
		</view>
		<view class="msg-box u-flex u-flex-between u-flex-items-center">
			<view class="u-flex u-flex-items-center">
				<image src="@/static/message.png" mode="widthFix" style="width: 40rpx;height: auto;"></image>
				<view class="f-s-12 u-m-l-20 msg-text">消息通知</view>
				<view class="_line"></view>
				<view class="f-s-12 u-light-color">暂无通知</view>
			</view>
			<image src="@/static/right.png" style="width: 32rpx;height: 32rpx;"></image>
		</view>
		<view class="f-s-16 f-w-b u-m-t-26">待办任务</view>
		<up-empty :marginTop="60" mode="data" text="暂无代办" :width="80" :height="80"
			icon="https://imgs.ddeke.com/2024/08/01/C5UsP1Ggo6.png">
		</up-empty>
	</view>

	<up-popup :show="show" @close="show = false" :safeAreaInsetBottom="false" :round="12" mode="center">
		<view class="notice-box">
			<view class="text-center f-s-18 f-w-b">系统通知</view>
			<view class="f-s-14 u-info u-m-t-34">警企通用户您好，</view>
			<view class="f-s-14 u-m-t-16">{{ notice.noticeTitle }}</view>
			<view class="f-s-14 u-m-t-8 u-info">
				{{ notice.noticeContent }}
			</view>
			<view class="f-s-12 u-m-t-16 u-light-color">
				{{ notice.createTime }} 由{{ notice.createBy }}发布
			</view>
			<up-button text="知道了" :customStyle="{
				width: '500rpx',
				height: '80rpx',
				background: '#1677FF',
				borderRadius: '16rpx',
				fontSize: '28rpx',
				color: '#FFFFFF',
				marginTop: '32rpx'
			}" @click="show = false"></up-button>

		</view>
	</up-popup>

</template>

<script setup>
	import AppItem from '@/components/AppItem.vue';
	import WeatherIcon from '@/components/WeatherIcon.vue';
	import UQRCode from 'uqrcodejs';
	import {
		homeData,
		appData,
		noticeData,
		noticeInfo
	} from '@/api/home.js'
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onShareAppMessage
	} from "@dcloudio/uni-app"
	import store from '@/store/index.js';
	import {
		toast
	} from '../utils/common';
	// 微信小程序环境
	// #ifdef MP-WEIXIN
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	// #endif
	// 其他环境
	// #ifndef MP-WEIXIN
	const bottom = 20
	// #endif

	const show = ref(false)
	const pageData = ref({
		// weather: {},
		appList: [],
		noticeList: [],
		enterprise: {}
	})
	const notice = ref({})
	const userInfo = ref({})
	const tabList = [{
		name: '待办任务'
	}]

	onShow(() => {
		userInfo.value = store.getters.userInfo
		init()
	})

	const login = () => {
		// 微信小程序环境
		// #ifdef MP-WEIXIN
		uni.navigateTo({
			url: '/pages/login'
		})
		// #endif
		// 其他环境
		// #ifndef MP-WEIXIN
		uni.navigateTo({
			url: '/pages/account_login'
		})
		// #endif
	}

	const toPage = (e) => {
		const page = e.page
		if (!page) {
			toast("正在完善中...")
			return
		}
		uni.navigateTo({
			url: page
		})

	}


	const showNotice = (id) => {
		noticeInfo(id).then(resp => {
			notice.value = resp.data
			show.value = true
		})
	}

	const init = () => {
		homeData().then(resp => {
			pageData.value = resp.data
			const isLogin = resp.data.isLogin
			if (!isLogin) {
				userInfo.value = {}
				pageData.value.appList = []
			}
		})
	}

	const entQrCode = () => {
		if(!pageData.value.enterprise){
			toast('暂无企业二维码')
			return
		}
		uni.navigateTo({
			url: `/pages/entQrcode?id=${pageData.value.enterprise.entID}&name=${pageData.value.enterprise.entName}`
		})
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5 !important;
	}

	.home-top {
		height: 430rpx;
		background-image: url(https://hcimg.wq-info.com/cxhc/2024/08/22/index-bg_195221323A001.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		box-sizing: border-box;
		position: relative;

		.entp-box {
			margin-top: 58rpx;
			width: calc(100vw - 64rpx);
			box-sizing: border-box;
			padding: 0 24rpx;
			height: 100rpx;
			background: linear-gradient(270deg, #B9DAFF 0%, #FFFFFF 100%);
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 12rpx;
		}

		// .user-box {
		// 	position: absolute;
		// 	width: calc(100vw - 64rpx);
		// 	background-image: url(https://imgs.ddeke.com/2024/07/30/Y7hOrrxAMr.png);
		// 	background-size: 100% 100%;
		// 	background-repeat: no-repeat;
		// 	box-sizing: border-box;
		// 	padding: 32rpx;
		// 	height: 202rpx;
		// 	margin-top: 32rpx;

		// 	.dept {
		// 		border-radius: 4rpx;
		// 		border: 1rpx solid rgba(22, 119, 255, 0.25);
		// 		padding: 6rpx 8rpx;
		// 		font-size: 20rpx;
		// 		color: #1677FF;
		// 		line-height: 20rpx;
		// 		margin-left: 24rpx;
		// 	}

		// 	.info-box {
		// 		padding-top: 20rpx;
		// 		border-top: 1rpx solid rgba(0, 0, 0, 0.06);
		// 	}

		// 	.msg-text {
		// 		color: #FF701D;
		// 	}

		// 	._line {
		// 		margin: 0 16rpx;
		// 		width: 1rpx;
		// 		height: 32rpx;
		// 		background: rgba(0, 0, 0, 0.06);
		// 	}
		// }

		.home-area {
			margin-top: 24rpx;
			padding: 40rpx 30rpx 4rpx;
			background: #ffffff;
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
		}

		.msg-box {
			margin-top: 24rpx;
			height: 88rpx;
			padding: 0 24rpx;
			background: linear-gradient(270deg, #FFFFFF 0%, #EFF5FF 100%);
			box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx;
			border: 2rpx solid #FFFFFF;

			.msg-text {
				color: #1677FF;
			}

			._line {
				margin: 0 16rpx;
				width: 1rpx;
				height: 32rpx;
				background: rgba(0, 0, 0, 0.06);
			}
		}
	}

	
</style>